
@import 'common';

// app icons
.icon-grid {
  row-spacing: 12px;
  column-spacing: 12px;
  max-row-spacing: 72px;
  max-column-spacing: 72px;
  page-padding-top: 24px;
  page-padding-bottom: 24px;
  page-padding-left: 12px;
  page-padding-right: 12px;
}

.app-folder-dialog {
  .page-navigation-hint {
    width: 80px;
  }

  .page-navigation-arrow {
    margin: 18px;
  }
}

.apps-scroll-view {
  padding: 0;
}

.page-navigation-hint {
  width: 300px;

  &.dnd {
    background: rgba(255, 255, 255, 0.1);
  }

  &.next:ltr,
  &.previous:rtl {
    background-gradient-start: $inverse_divider_color;
    background-gradient-end: transparent;
    background-gradient-direction: horizontal;
    border-radius: 32px 0px 0px 32px;
  }

  &.previous:ltr,
  &.next:rtl {
    background-gradient-start: transparent;
    background-gradient-end: $inverse_divider_color;
    background-gradient-direction: horizontal;
    border-radius: 0px 32px 32px 0px;
  }
}

.page-navigation-arrow {
  margin: $base_padding;
  width: 24px;
  height: 24px;
  border-radius: 99px;
  color: $inverse_secondary_fg_color;
  icon-size: 24px;
}

// Dash
$dash_background_color: $inverse_divider_color;
$dash_placeholder_size: 32px;
$dash_padding: 10px;
$dash_spacing: 2px;
$dash_bottom_margin: 24px;
$dash_border_radius: $dash_padding + $icon_radius;

#dash {
  margin-top: $base_padding * 2;
  padding: 0 $dash_padding;

  .placeholder {
    background-image: none;
    background-size: contain;
    height: $dash_placeholder_size;
  }

  .overview-icon {
    padding: $dash_padding - 2px;
    // border-radius: $icon_radius;
  }
}

.dash-background {
  background-color: $dash_background_color;
  margin-bottom: $dash_bottom_margin;
  padding: $dash_padding $dash_padding - $dash_spacing;
  border-radius: $dash_border_radius;
}

// Dash Items
.dash-item-container .app-well-app, .show-apps {
  padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
}

.dash-separator {
  width: 1px;
  margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
  background-color: rgba(white, 0.25);
}

// OSD Tooltip
.dash-label {
  color: $inverse_secondary_fg_color;
  background-color: rgba(black, 0.75);
  border-radius: $circular_radius;
  padding: $base_padding $base_padding * 2;
  text-align: center;
  border: none;
  -y-offset: 10px; // distance from the dash edge
}

// Workspace animation
.workspace-animation {
  background-color: rgba($gdm_bg_color, 1);
}

// reset prev/next month icons
.calendar {
  .calendar-change-month-back,
  .calendar-change-month-forward {
    padding: 0 2px;
  }
}

// Overview
.controls-manager, .secondary-monitor-workspaces {
  spacing: $base_padding * 2;
}

#overviewGroup {
  background-color: rgba($gdm_bg_color, 1);
}

#unlockDialogNotifications {
  StButton#vhandle, StButton#hhandle {
    background-color: transparentize($gdm_bg_color, 0.7);
    &:hover, &:focus { background-color: transparentize($gdm_bg_color, 0.5); }
    &:active { background-color: transparentize($primary_color, 0.5); }
  }
}

.search-entry {
  margin-top: $base_padding * 4;
  margin-bottom: $base_padding;
}

// Window picker
.window-picker {
  // Space between window thumbnails
  spacing: $base_padding;
}

// Window titles
.window-caption {
  color: $inverse_secondary_fg_color;
  background-color: rgba(black, 0.75);
  border-radius: $circular_radius;
  padding: $base_padding $base_padding * 2;
  text-align: center;
  border: none;
}

$window_close_button_size: 30px;
$window_close_button_padding: 3px;

// Close button
.window-close {
  background-color: rgba($destructive_color, 1);
  color: white;
  border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
  padding: $window_close_button_padding;
  height: $window_close_button_size;
  width: $window_close_button_size;
  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
  transition-duration: 300ms;

  StIcon {
    color: white;
  }

  &:hover {
    color: white;
    background-color: lighten(rgba($destructive_color, 1), 6%);
  }

  &:active {
    color: white;
    background-color: darken(rgba($destructive_color, 1), 6%);
  }
}

.workspace-background {
  // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
  border-radius: 30px;
  background-color: $gdm_bg_color;
  box-shadow: 0 4px 16px 4px transparentize(darken($gdm_bg_color, 30%), 0.7);
}

/* Workspace pager */

// thumbnails in overview
.workspace-thumbnails {
  visible-width: 32px; //amount visible before hover
  spacing: $base_padding;
  padding: $base_padding;

  .workspace-thumbnail {
    color: $inverse_secondary_fg_color;
    background-color: $inverse_divider_color;
    border: none;
    border-radius: $buttons_radius;
  }

  // drag and drop indicator
  .placeholder {
    background-image: url("assets/dash-placeholder.svg");
    background-size: contain;
    width: 18px;
    height: 24px;
  }
}

// selected indicator
.workspace-thumbnail-indicator {
  border: 3px solid $primary_color;
  border-radius: 9px;
  padding: 0px;
  // background-color: transparentize($primary_color, 0.9);
}

//
// Popup menu
//

.popup-menu {
  .popup-menu-item {
    padding: $base_padding;

    &:ltr { padding-right: $base_padding * 3 !important; padding-left: $base_padding * 3 !important; }
    &:rtl { padding-left: $base_padding * 3 !important; padding-right: $base_padding * 3 !important; }
  }
}

// separator
.popup-separator-menu-item {
  border: none !important;
  padding: $base_padding 0 !important;

  .popup-separator-menu-item-separator {
    height: 1px; //not really the whole box
    background-color: $border_color;
  }

  .popup-menu-ornament {
    width: 0 !important;
  }

  // separators in submenus
  .popup-sub-menu & {
    background-color: transparent;

    // account for ornament
    &:ltr { margin-right: 2.5em; }
    &:rtl { margin-left: 2.5em; }

    .popup-separator-menu-item-separator {
      background-color: $border_color;
    }
  }
}

// system status popover menu
.aggregate-menu {
  .popup-menu-item > :first-child {
    &:ltr { padding-left: 0 !important; margin-left: 0 !important; }
    &:rtl { padding-right: 0 !important; margin-right: 0 !important; }
  }

  .popup-sub-menu .popup-menu-item > :first-child {
    &:ltr { padding-left: $base_padding * 2 !important; margin-left: $base_padding / 2 !important; }
    &:rtl { padding-right: $base_padding * 2 !important; margin-right: $base_padding / 2 !important; }
  }
}

//
// OSD window
//

.osd-window {
  spacing: $base_padding * 2; // 12px
  padding: $base_padding * 2 $base_padding * 3;
  & > * { spacing: 8px; }
  margin-bottom: 4em;

  StIcon { icon-size: 32px; } // 32px

  StLabel {
    &:ltr { margin-right: $base_padding; }
    &:rtl { margin-left: $base_padding; }
  }
}

//
// Quick Settings Popup
//

.quick-settings {
  padding: $base_padding * 2 !important;
  border-radius: $menu_radius * 4 !important;
  margin-top: $base_padding + 2px !important;

  .icon-button, .button {
    padding: $base_padding * 1.5;
  }
}

.quick-settings-grid {
  spacing-rows: $base_padding * 2;
  spacing-columns: $base_padding * 2;
}

.quick-toggle {
  border-radius: $circular_radius;
  min-width: 12em;
  max-width: 12em;
  min-height: 42px;
  border: none;
  background-color: $divider_color !important;

  &:hover {
    background-color: $semi_fill_color !important;
  }

  &:active {
    background-color: $track_color !important;
  }

  &:checked {
    background-color: $primary_color !important;
    color: $inverse_fg_color !important;

    &:hover {
      background-color: mix($inverse_fg_color, $primary_color, 6%) !important;
      color: $inverse_fg_color !important;
    }

    &:active {
      background-color: mix($inverse_fg_color, $primary_color, 15%) !important;
      color: $inverse_fg_color !important;
    }
  }

  & > StBoxLayout { spacing: $base_padding; }

  /* Move padding into the box; this is to allow menu arrows
     to extend to the border */
  &.button { padding: 0; }
  & > StBoxLayout { padding: 0 $base_padding * 2; }
  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }

  .quick-toggle-label { font-weight: bold; }
  .quick-toggle-icon, .quick-toggle-arrow { icon-size: 16px; }
}

.quick-menu-toggle {
  &:ltr > StBoxLayout { padding-right: 0; }
  &:rtl > StBoxLayout { padding-left: 0; }

  .quick-toggle-arrow {
    background-color: $divider_color !important;
    padding: $base_padding $base_padding * 1.75;

    &:active {
      background-color: $semi_fill_color !important;
    }

    &:ltr { border-radius: 0 $circular_radius $circular_radius 0; }
    &:rtl { border-radius: $circular_radius 0 0 $circular_radius; }
  }
}

.quick-slider {
  padding: 0 $base_padding;

  & > StBoxLayout { spacing: $base_padding; }

  .slider-bin {
    &:focus { @include button(focus); }
    min-height: 16px; // slider size
    padding: $base_padding;
    border-radius: $circular_radius;
  }

  .quick-toggle-icon {
    icon-size: 16px;
  }

  .icon-button {
    background-color: transparent;
    color: $button_fg_color !important;

    &:hover {
      background-color: $divider_color;
    }

    &:active {
      background-color: $semi_fill_color;
    }
  }
}

.quick-toggle-menu {
  background-color: $base_color !important;
  color: $button_fg_color !important;
  border-radius: $menu_radius * 3;
  padding: $base_padding * 2;
  margin: $base_padding * 2 $base_padding * 4 0;

  .popup-menu-item {
    border-radius: $circular_radius !important;
    padding: $base_padding * 1.5 $base_padding * 3 !important;

    &:focus, &:hover, &.selected {
      color: $button_fg_color !important;
      background-color: $semi_fill_color !important;
    }

    > StIcon { -st-icon-style: symbolic; }
  }

  .popup-separator-menu-item {
    padding: $base_padding 0 !important;
    margin: 0 !important;

    // .popup-separator-menu-item-separator {
    //   margin: 0 !important;
    // }
  }

  & .header {
    spacing-rows: 0.5 * $base_padding;
    spacing-columns: $base_padding * 2;
    padding-bottom: 2 * $base_padding;

    & .icon {
      icon-size: 16px * 1.5; // a non-standard symbolic size but ok
      border-radius: $circular_radius;
      padding: 1.5 * $base_padding;
      background-color: $semi_fill_color !important;

      &.active {
        background-color: $primary_color !important;
        color: $inverse_fg_color;
      }
    }
  }
}

.quick-settings-system-item {
  & > StBoxLayout { spacing: 2 * $base_padding; }

  .icon-button {
    background-color: $row_fill_color;
    color: $button_fg_color;
    border-radius: $circular_radius;
    min-height: 24px;
    min-width: 24px;

    &:hover { @include button(flat-hover); }
    &:active { @include button(flat-active); }

    > StIcon { -st-icon-style: symbolic; }
  }

  & .power-item {
    min-height: 0;
    min-width: 0;

    &:insensitive {
      @include button(normal);
      background-color: transparent;
    }
  }
}

.nm-network-item {
  .wireless-secure-icon { icon-size: 0.5 * 16px; }
}
